<template>
  <div v-for="item in cardTimesPackItem.memberBenefitsBeanList" :key="item.id"
       :class="['item',getCardGiveRemainQty({cardTimesPackItem, memberBenefitsBeanItem: item})<1&&'disabled']">
    <TypographyText :ellipsis="{rows:1}" class="title">
      <span class="give">赠</span>
      {{ item.benefitsName }}
    </TypographyText>
    <div class="label">剩余次数</div>
    <div class="number">{{ getCardGiveRemainQty({cardTimesPackItem, memberBenefitsBeanItem: item}) }}</div>
    <div class="add">
      <img v-if="getCardGiveRemainQty({cardTimesPackItem, memberBenefitsBeanItem: item})>0"
           src="./img/add-1.png" class="use icon"
           @click="addCardGive2Cart({cardTimesPackItem,memberBenefitsBeanItem:item})" alt=""/>
      <img v-else src="./img/add-2.png" class="icon" alt="">
    </div>
  </div>
</template>

<script setup>
import {addCardGive2Cart, getCardGiveRemainQty} from "./cart.js";
import {TypographyText} from "ant-design-vue";

const props = defineProps({
  cardTimesPackItem: {
    type: Object,
  },
});

</script>

<style scoped>
.item {
  position: relative;
  background: #FFF;
  font-weight: bold;
  font-size: 14px;
  color: #C95E78;

  width: 31%;
  box-shadow: 0 1px 4px 0 rgba(146, 146, 146, 0.17);
  border-radius: 5px;

  padding: 6px;
  margin: 6px 0;

  .title {
    font-weight: bold;
    font-size: 14px;
    color: #C95E78;
  }

  .label {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
  }

  .number {
    font-weight: 400;
    font-size: 32px;
    color: #999999;
    padding-left: 6px;
  }

  .icon {
    width: 25px;
    object-fit: contain;
  }

  .add {
    margin-top: -12px;
    text-align: right;
  }
}

.disabled {
  background: #F6F6F6;
}

.give {
  background: linear-gradient(143deg, #FFB0D5 0%, #FF819F 100%);
  box-shadow: 0 1px 2px 0 rgba(199, 199, 199, 0.4);
  color: #fff;

  padding: 4px 4px;
  font-size: 10px;
  border-radius: 6px;
}

</style>
